<template>
  <div>
    <!-- v-model获取输入的信息  -->
    <input
      placeholder="输入关键字搜索"
      v-model.trim="person"
      @keyup.enter="isshowItem(person)"
    />
    <HospContent :arr="records" @openmodal="openmodalFn"> </HospContent>
    <LookModal :obj="obj" v-show="isshowModal" @yincang="yincang"></LookModal>
  </div>
</template>

<script>
import HospContent from './components/HospContent.vue'
import LookModal from './components/LookModal.vue'
export default {
  components: {
    //组件名  : 组件对象
    HospContent,
    LookModal,
  },
  data() {
    return {
      obj: {
        date: '',
        doctor: '',
        diagnosis: '',
        prescription: '',
      },
      isshowModal: false,
      person: '',
      records: [
        {
          date: '2022-01-01',
          doctor: '张三',
          diagnosis: '感冒',
          prescription: '感冒药',
        },
        {
          date: '2022-02-01',
          doctor: '李四',
          diagnosis: '头疼',
          prescription: '止疼药',
        },
        {
          date: '2022-03-01',
          doctor: '王五',
          diagnosis: '腰痛',
          prescription: '止痛贴',
        },
      ],
    }
  },
  methods: {
    isshowItem(person) {
      this.records = this.records.filter((item) => {
        return item.doctor == person
      })
      this.person = person
    },

    openmodalFn(doctor) {
      const obj = this.records.find((item) => item.doctor == doctor)
      // console.log(obj)
      this.obj = obj
      /*  当点击了详情之后 控制模态框 显示隐藏 */
      this.isshowModal = true
    },
    yincang() {
      this.isshowModal = false
    },
  },
  watch: {
    records: {
      handler() {
        localStorage.setItem('records', JSON.stringify(this.records))
      },
      deep: true,
    },
  },
}
</script>

<style></style>
